<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/base' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>导入文件</el-breadcrumb-item>
		</el-breadcrumb>
		
			<el-upload
			  class="upload-demo"
			  ref="upload"
			  action="/excel/styleImport"
			  :on-preview="handlePreview"
			  :on-remove="handleRemove"
			  :file-list="fileList"
			  :limit="1"
			  :on-exceed="exceed"
			  :on-success = "notice"
			  :beforeUpload="beforeAvatarUpload"
			  :auto-upload="false">
			  <el-button slot="trigger" size="small" type="primary">上传xls文件</el-button>
			  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交</el-button>
			 <!-- <div slot="tip" class="el-upload__tip">只能上传xls文件，且不超过500kb</div>-->
			</el-upload>
			
		
	</div>
</template>

<script>
  export default {
    data() {
      return {
        fileList: [],
      };
    },
    methods: {
    	beforeAvatarUpload(file) {
    			console.log(file,9090);
				var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)				
				const extension = testmsg === 'xls'
				const isLt2M = file.size / 1024 /1024 < 1
				if(!extension) {
					this.$message({
						message: '上传文件只能是 xls格式!',
						type: 'warning'
					});
				}
				if(!isLt2M) {
					this.$message({
						message: '上传文件大小不能超过 1MB!',
						type: 'warning'
					});
				}
				
				 let fd = new FormData()
    				 fd.append('file', file)
				
				console.log(fd);
				
				
				//const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
				const isExcel = file.type ==='application/vnd.ms-excel';
				if(isExcel){
				return true;
				}else{
				this.$message.warning('只能上传excel文件格式xls');
				return false;
				}
				//return extension  && isLt2M
			},
    
    
      submitUpload() {
        this.$refs.upload.submit();
        
      },
     
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      exceed() {
        //重复选择文件,弹出错误弹窗
        this.$message("最多仅支持上传一个文件")
    },
	notice(e){
		console.log(e);
		if(e.code == 200){
			this.$message(e.message);
		}else{
			this.$message(e.message);
		}
	},
    }
  }
</script>